<template>
  <!-- 自动截图任务记录 -->
  <div class="app-container">
    <div class=" ">
      <el-form class="search-form-new" :model="queryParams" ref="queryForm" :inline="true" label-width="80">
        <el-form-item label="店铺" prop="tenantId" v-hasPermi="['searchTenantID']">
          <el-select v-model="queryParams.tenantId" placeholder="请选择店铺" clearable filterable>
            <el-option v-for="dict in tenantList" :key="dict.tenantId" :label="dict.tenantName" :value="dict.tenantId" />
          </el-select>
        </el-form-item>
        <el-form-item label="游戏" prop="gameId">
          <el-select v-model="queryParams.gameId" placeholder="请选择游戏" clearable filterable>
            <el-option v-for="dict in allGameList" :key="dict.id" :label="dict.name" :value="dict.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="商品编号" prop="goodsId">
          <el-input v-model="queryParams.goodsId" placeholder="请输入商品编号" clearable />
        </el-form-item>
        <el-form-item label="游戏账号" prop="accountNumber">
          <el-input v-model="queryParams.accountNumber" placeholder="请输入游戏账号" clearable />
        </el-form-item>
        <el-form-item label="状态" prop="state">
          <el-select v-model="queryParams.state" placeholder="请选择" clearable filterable>
            <el-option v-for="(dict,key) in stateMap" :key="key" :label="dict.label" :value="key" />
          </el-select>
        </el-form-item>
        <el-form-item class="btns">
          <el-button type="primary" icon="el-icon-search" @click="getList">搜索</el-button>
        </el-form-item>
      </el-form>
      <div class="table_box">
        <el-table stripe :data="tableData.records" style="width: 100%">
          <el-table-column label="任务ID" prop="taskId" />
          <el-table-column label="店铺" prop="tenantName" />
          <el-table-column label="游戏" prop="gameName" />
          <el-table-column label="区服" prop="systemName">
            <template slot-scope="scope">
              <span>{{scope.row.systemName}}{{scope.row.carrierName}}{{scope.row.groupName}}{{scope.row.serverName}}</span>
            </template>
          </el-table-column>
          <el-table-column label="商品编号" prop="goodsId" />
          <el-table-column label="账号" prop="accountNumber" />
          <el-table-column label="状态" prop="state">
            <template slot-scope="scope">
              <el-tag :type="stateMap[scope.row.state].type">{{stateMap[scope.row.state].label}}</el-tag>

            </template>
          </el-table-column>
          <el-table-column label="创建时间" prop="createTime" />
          <el-table-column label="备注" prop="resAutoImg" >
            <template slot-scope="scope">
              <span >{{scope.row.resAutoImg}}</span>
              <div style="color: red;" v-if="notReStart.includes(scope.row.resAutoImg)">
                请重新发布商品
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" >
            <template slot-scope="scope">
              <el-button type="text" v-if="checkPermi(['searchTenantID'])" @click="openInfo(scope.row.id)">任务记录</el-button>
              <br/>
              <el-button type="edit" v-if="scope.row.state==5&&!notReStart.includes(scope.row.resAutoImg)" @click="restart(scope.row.id)">重新发起</el-button>
            </template>
          </el-table-column>

          <!-- <el-table-column label="密码" prop="accountPassword" >
            <template slot-scope="scope">
                  <span>{{ typeObj[scope.row.type]}}</span>
                </template>
          </el-table-column> -->

          <!-- <el-table-column label="附件图片" min-width="130" prop="imgurl" >
            <template slot-scope="scope">
              <div v-if="scope.row.imgurl">
                <el-image v-for="(img,i) in scope.row.imgurl.split(',')" :key="i" :preview-src-list="scope.row.imgurl.split(',')" :src="img"  style="height:32px;margin-right:10px;margin-bottom:5px"></el-image>
              </div>
            </template>
          </el-table-column> -->
        </el-table>

      </div>
      <pagination v-show="tableData.total > 0" :total="tableData.total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />

    </div>

    <el-dialog title="任务详情" :visible.sync="dialogVisible" width="1300" >
        <div class="table_box">
          <el-table stripe :data="taskInfo" style="width: 100%">
          <!-- <el-table-column label="账号" prop="accountNumber" />
          <el-table-column label="商品编号" prop="goodsId" /> -->
          <el-table-column label="时间" prop="createTime" width="160"/>
          <el-table-column label="上传内容" prop="content" >
            <template slot-scope="scope">
              <div style="max-height:130px;overflow-y:auto">
                {{scope.row.content}}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="下发内容" prop="xiafacontent" >
            <template slot-scope="scope">
              <div style="max-height:130px;overflow-y:auto">
                {{scope.row.xiafacontent}}
              </div>
            </template>
          </el-table-column>
        </el-table>
        </div>
        <div slot="footer">
            <el-button @click="dialogVisible = false">关 闭</el-button>
        </div>
    </el-dialog>
  </div>
</template>

<script>
import autoApi from "@/api/autoProduction/information.js";
export default {
  name: "TaskByXiaosuan",
  components: {},
  data() {
    return {
      dialogVisible:false,
      notReStart:['授权失败','扫码登录失败'],
      tableData: {
        records: [],
        total: 0,
      },
      queryParams: {
        pageSize: 10,
        pageNum: 1,
      },
      taskInfo: [],
      loading: false,
      stateMap: {
        3: {
          label: "执行中",
          type: "warning",
        },
        4: {
          label: "执行成功",
          type: "success",
        },
        5: {
          label: "执行失败",
          type: "danger",
        },
        6: {
          label: "已重新执行",
          type: "",
        },
      },
    };
  },
  computed: {
    tenantList() {
      return this.$store.getters.tenantList;
    },
    allGameList() {
      return this.$store.getters.allGameList;
    },
  },
  created() {
    this.getList();
    // this.getTypeList();
  },
  activated() {
    // this.getList();
  },
  methods: {
    // 获取列表
    getList() {
      this.loading = true;
      autoApi
        .autoImgTasklist(this.queryParams)
        .then((response) => {
          this.loading = false;
          this.tableData.records = response.rows;
          this.tableData.total = response.total;
        })
        .catch((err) => {
          this.loading = false;
        });
    },
    // 搜索
    search() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    // 重新发起任务
    restart(id){
      this.$confirm("验号有效期1-3天，如果重新执行失败，请将商品删除后重新发布！确定重新执行当前任务吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          autoApi.autoImgTaskRestart({id:id}).then((res) => {
            this.$message({
              type: "success",
              message: "已重新开始执行任务!",
            });
            this.getList();
          });
        })
        .catch(() => {});
    },
    // 查看任务详情
    openInfo(id) {
      autoApi
        .autoImgTaskRecordInfo({
          autoImgTaskId: id,
        })
        .then((res) => {
          this.taskInfo = res.rows;
          this.dialogVisible = true
        });
    },
    // 删除记录
    delItem(row) {
      this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          imageApi.delImage(row.id).then((res) => {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.getList();
          });
        })
        .catch(() => {});
    },
  },
};
</script>
<style lang="scss" scoped></style>
